<template>
  <view class="container">
    <view class="form-box">
      <view class="form-item">
        <view class="label">
          <text>上传二维码</text>
        </view>
        <view class="form-content upload-box">
          <view class="up-img">
            <image
              v-if="!form.ewm_image"
              @click="upload('ewm_image')"
              :src="$img_path('/pagesRegion/15.png')"
              mode="widthFix"
            ></image>

            <image
              v-if="form.ewm_image"
              class="del"
              @click="delimg('ewm_image')"
              :src="$img_path('/pagesRegion/16.png')"
              mode="widthFix"
            ></image>
            <image
              v-if="form.ewm_image"
              :src="$img_base_url(form.ewm_image)"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <text>上传群头像</text>
        </view>
        <view class="form-content upload-box">
          <view class="up-img">
            <image
              v-if="!form.image"
              @click="upload('image')"
              :src="$img_path('/pagesRegion/15.png')"
              mode="widthFix"
            ></image>

            <image
              v-if="form.image"
              class="del"
              @click="delimg('image')"
              :src="$img_path('/pagesRegion/16.png')"
              mode="widthFix"
            ></image>
            <image
              v-if="form.image"
              :src="$img_base_url(form.image)"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <text>群昵称</text>
        </view>
        <view class="form-content input-box">
          <view class="int">
            <input
              type="text"
              v-model="form.name"
              placeholder="请输入群昵称"
              placeholder-class="pla-class"
            />
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <text>群位置</text>
        </view>
        <view class="form-content input-box">
          <view class="int" @click="openLocation">
            <text v-if="true" class="pla-class">{{
              address || "请选择所在位置"
            }}</text>
            <text v-else>郑州二七</text>
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <text>群详细位置</text>
        </view>
        <view class="form-content input-box">
          <view class="int">
            <input
              type="text"
              v-model="form.address"
              placeholder="请输入详细地址"
              placeholder-class="pla-class"
            />
          </view>
        </view>
      </view>
    </view>

    <view class="edit-del" v-if="form.id" @click="delQun">
      <image :src="$img_path('/pagesRegion/17.png')" mode="widthFix"></image>
      <text>删除此企业微信群</text>
    </view>

    <view class="bottom-btn">
      <view class="b-box">
        <button @click="setQun">保存</button>
      </view>
    </view>
    <selectCity ref="selectCity"></selectCity>
  </view>
</template>

<script>
import { upload } from "@/utils/api/public.js";
import { deleteQun, setQun, getLocation } from "@/utils/api/serviceApi.js";
import selectCity from "./components/selectCity.vue";
export default {
  components: {
    selectCity,
  },
  data() {
    return {
      address: "",
      form: {
        name: "",
        image: "",
        ewm_image: "",
        address: "",
      },
    };
  },
  onLoad(options) {
    console.log(options.form);
    this.form = JSON.parse(options.form);
  },
  methods: {
    setQun() {
      let tips = [];
      if (!this.form.name) {
        tips.push("群昵称");
      }
      if (!this.form.image) {
        tips.push("群头像");
      }
      if (!this.form.ewm_image) {
        tips.push("二维码");
      }
      if (!this.form.address) {
        tips.push("群详细位置");
      }
      if (tips.length) {
        uni.showToast({
          title: `请填写${tips.join("、")}`,
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "加载中...",
      });
      setQun(this.form).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: "操作成功",
          icon: "none",
          success() {
            uni.navigateBack();
          },
        });
      });
    },

    delQun() {
      uni.showLoading({
        title: "删除中...",
      });
      deleteQun({ id: this.form.id }).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: "操作成功",
          icon: "none",
          success() {
            uni.navigateBack();
          },
        });
      });
    },

    upload(props) {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          let file = res.tempFilePaths[0];
          uni.showLoading({
            title: "上传中...",
          });
          upload({ file }).then((res) => {
            uni.hideLoading();
            this.form[props] = res.data.url;
          });
        },
      });
    },
    delimg(props) {
      this.form[props] = "";
    },

    openLocation() {
      const that = this;
      uni.getLocation({
        type: "gcj02", //返回可以用于uni.openLocation的经纬度
        success: (res) => {
          const latitude = res.latitude;
          const longitude = res.longitude;
          uni.chooseLocation({
            latitude: latitude,
            longitude: longitude,
            success: (data) => {
              console.log("success", data);
              this.address = data.name;
              this.form.address = data.address;
              getLocation({
                lat: Number(data.latitude.toFixed(6)),
                lng: Number(data.longitude.toFixed(6)),
              }).then((res) => {
                console.log("res", res);
                const { adcode, city, citycode, country, district, province } =
                  res.data.regeocode.addressComponent;
                that.$forceUpdate();
              });
            },
          });
        },
      });
    },
  },
};
</script>
<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.container {
  .form-box {
    .form-item {
      padding: 0 22rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        line-height: 44rpx;
      }
      .form-content {
        &.upload-box {
          padding: 22rpx 0;
          .up-img {
            position: relative;
            & > image {
              width: 140rpx;
              height: 140rpx;
              border-radius: 20rpx;
            }
            .del {
              position: absolute;
              top: 8rpx;
              right: 8rpx;
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
        &.input-box {
          padding: 32rpx 0 34rpx;
          flex: 1;
          .int {
            /deep/ .pla-class {
              font-weight: 400;
              font-size: 32rpx;
              color: #b4b4b4;
              line-height: 44rpx;
            }
            font-weight: 400;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            text-align: right;
          }
        }
      }
    }
  }

  .edit-del {
    display: flex;
    align-items: center;
    margin-top: 92rpx;
    justify-content: center;
    image {
      width: 40rpx;
      height: 45rpx;
    }
    text {
      font-weight: 400;
      font-size: 32rpx;
      color: #ff4a4a;
      line-height: 44rpx;
      margin-left: 18rpx;
    }
  }
}
.bottom-btn {
  width: 100%;
  height: calc(constant(safe-area-inset-bottom) + 140rpx);
  height: calc(env(safe-area-inset-bottom) + 140rpx);
  .b-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20rpx 22rpx 0;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    box-sizing: border-box;
    button {
      width: 100%;
      height: 96rpx;
      background: linear-gradient(135deg, #ffa233 0%, #fb4c4c 100%);
      border-radius: 80rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #ffffff;
      line-height: 96rpx;
    }
  }
}
</style>
